<template>
  <a-modal title-align="start" title="接/拒单" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="1000">
    <a-descriptions :data="list" bordered>
      <template #label="{ label }">{{ label }}：</template>
      <template #value="{ data, value }">
        <div v-if="data.label == '订单号'">{{ info.platformOrderNumber }}</div>
        <div v-if="data.label == '店铺'">{{ info.shopName }}</div>
        <div v-if="data.label == '订单商品'">
          <span>{{ info.msku ? info.msku : '--' }}</span>
          <span> / </span>
          <span>{{ info.asin ? info.asin : '--' }}</span>
        </div>
        <div v-if="data.label == '产品SKU'">{{ $extract(info, 'product.productSku') }}</div>
        <div v-if="data.label == '销售员'">{{ $extract(info, 'saler.name') }}</div>
        <div v-if="data.label == '定制编号'">{{ $extract(info, 'customCode') }}</div>
        <div v-if="data.label == '期望交期'">{{ $setTime(info.gmtExpectDelivery, 'YYYY-MM-DD') }}</div>
        <div v-if="data.label == '包装'">{{ $extract(info, 'packing.packingName') }}</div>
        <div v-if="data.label == '采购方'">{{ $extract(info, 'purchaseCompany.companyName') }}</div>
        <div v-if="data.label == '采购员'">
          <a-select style="width: 260px" @change="changePurchaser" allow-search v-model="itemInfo.purchaser.id" placeholder="请选择采购员">
            <a-option v-for="(item, index) of userList" :key="index" :label="item.userName" :value="item.id"></a-option>
          </a-select>
        </div>
      </template>
    </a-descriptions>
    <a-descriptions class="mt10" :column="2" :data="customBasicInfoList" bordered>
      <template #label="{ label }">{{ label }}：</template>
      <template #value="{ data, value }">
        <div v-if="data.label == '定制类型'">{{ $extract(info, 'customInfo.customType') }}</div>
        <div v-if="data.label == '材质'">{{ $extract(info, 'customInfo.material') }}</div>
        <div v-if="data.label == '刻字内容'">{{ $extract(info, 'customInfo.fontTxt') }}</div>
        <div v-if="data.label == '字体'">{{ $extract(info, 'customInfo.fontFamily') }}</div>
        <div v-if="data.label == '电镀颜色'">{{ $extract(info, 'customInfo.platinColor') }}</div>
        <div v-if="data.label == '戒指尺码'">{{ $extract(info, 'customInfo.ringSize') }}</div>
        <div v-if="data.label == '石头'">{{ $extract(info, 'customInfo.stone') }}</div>
        <div v-if="data.label == '链条'">{{ getfittingName(info) }}</div>
        <div v-if="data.label == '字印'">{{ $extract(info, 'customInfo.fontPrint') }}</div>
        <div v-if="data.label == '备注'">{{ $extract(info, 'customInfo.remark') }}</div>
      </template>
    </a-descriptions>
    <template #footer class="modal-footer">
      <a-button class="gray-outline" @click="showvisible = false">取消</a-button>

      <a-popover v-model:popup-visible="showPopoverVisible" trigger="click">
        <a-button class="gray-outline" @click="showPopoverVisible = true">采购驳回</a-button>
        <template #content>
          <a-textarea v-model="rejectText" placeholder="请输入拒绝原因" allow-clear />
          <div class="flex-c-end">
            <a-space>
              <a-button size="small" class="gray-outline" @click="showPopoverVisible = false">取消</a-button>
              <a-button size="small" type="primary" @click="submit(false)">确认</a-button>
            </a-space>
          </div>
        </template>
      </a-popover>

      <a-button type="primary" @click="submit(true)">确认接单</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { Message } from '@arco-design/web-vue'
  import { onMounted, ref, computed } from 'vue'
  import { batchPurchaseTake } from '@/api/purchase'
  import { getOrganizesUser } from '@/api/system'
  import useUserStore from '@/store/modules/user'
  let props = defineProps(['modelValue', 'type', 'info', 'getfittingName'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })
  const userInfo = useUserStore()
  let showPopoverVisible = ref(false)
  let rejectText = ref('')
  let itemInfo = ref<any>({})
  let list = ref([
    { label: '订单号', value: 'Socrates' },
    { label: '店铺', value: 'Socrates' },
    { label: '订单商品', value: 'Socrates' },
    { label: '产品SKU', value: 'Socrates' },
    { label: '销售员', value: 'Socrates' },
    { label: '定制编号', value: 'Socrates' },
    { label: '期望交期', value: 'Socrates' },
    { label: '包装', value: 'Socrates' },
    { label: '采购方', value: 'Socrates' },
    { label: '采购员', value: 'Socrates' },
  ])
  let customBasicInfoList = ref([
    { label: '定制类型', value: 'Socrates' },
    { label: '材质', value: 'Socrates' },
    { label: '刻字内容', value: 'Socrates' },
    { label: '字体', value: 'Socrates' },
    { label: '电镀颜色', value: 'Socrates' },
    { label: '戒指尺码', value: 'Socrates' },
    { label: '石头', value: 'Socrates' },
    { label: '链条', value: 'Socrates' },
    { label: '字印', value: 'Socrates' },
    { label: '备注', value: 'Socrates' },
  ])

  let userList = ref<Array<any>>([])
  const getUSerList = async () => {
    let params = {
      depart: false,
      pageNum: 1,
      pageSize: 100000,
    }
    const res: any = await getOrganizesUser(params)
    userList.value = res?.data?.records || []
  }

  const submit = async (accept: boolean) => {
    if (!rejectText.value && !accept) return Message.error('请输入拒绝原因')
    let params = {
      accept: accept,
      idList: [props.info.id],
      purchaser: itemInfo.value.purchaser || {},
      rejectReason: rejectText.value,
    }
    const res: any = await batchPurchaseTake(params)
    if (res) {
      Message.success('操作成功')
      showPopoverVisible.value = false
      showvisible.value = false
      emits('save')
    }
  }

  const changePurchaser = (val: string) => {
    let user = userList.value.find((e) => e.id == val)
    if (user) {
      let obj = {
        deptId: user?.deptId || '',
        deptName: user?.deptName || '',
        id: user?.id || '',
        name: user?.userName || '',
      }

      itemInfo.value.purchaser = obj
    }
  }

  const init = () => {
    itemInfo.value = props.info
    if (!itemInfo.value?.purchaser?.id) {
      itemInfo.value.purchaser = {
        id: userInfo.$state.userId,
        name: userInfo.$state.userName,
        deptId: userInfo.$state.deptId || '',
        deptName: userInfo.$state.deptName || '',
      }
    }

    console.log(itemInfo.value)

    getUSerList()
  }

  onMounted(init)
</script>

<style lang="less" scoped></style>
